<?php
session_start();
include '../dbconnect.php';

// 获取商品 ID
$goods_id = isset($_REQUEST['id']) ? intval($_REQUEST['id']) : 0;

// 防止 SQL 注入，使用预处理语句
$stmt = $conn->prepare("SELECT * FROM goods WHERE GOODS_ID = ?");
$stmt->bind_param("i", $goods_id);
$stmt->execute();
$result = $stmt->get_result();

if ($result->num_rows > 0) {
    // 输出每行数据
    $row = $result->fetch_assoc();
} else {
    $row = null;
}
?>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <link rel="stylesheet" href="../css/styles.css">
    <style>
        .container {
            width: 1100px;
            margin: 0 auto;
        }
        .mt10 {
            margin-top: 10px;
        }
        .fl {
            float: left;
        }
        .fr {
            float: right;
        }
        .cut {
            clear: both;
        }
        .gtds {
            display: flex;
        }
        .gimbox {
            width: 40%;
        }
        .gtbox {
            width: 60%;
        }
        .module {
            margin-bottom: 20px;
        }
        .im {
            position: relative;
            overflow: hidden;
        }
        .im img {
            width: 100%;
            height: auto;
        }
        .zoom {
            position: absolute;
            bottom: 10px;
            right: 10px;
            cursor: pointer;
        }
        .tmb {
            display: flex;
            justify-content: space-between;
        }
        .tmb-im {
            display: flex;
        }
        .tmb-im img {
            margin-right: 10px;
            width: 60px;
            height: 60px;
            cursor: pointer;
        }
        .tmb-arrow {
            cursor: pointer;
        }
        .gatt dl {
            display: flex;
            align-items: center;
        }
        .gatt dt {
            width: 100px;
            font-weight: bold;
        }
        .gatt dd {
            flex-grow: 1;
        }
        .npri {
            color: red;
            font-size: 20px;
        }
        .ml5 {
            margin-left: 5px;
        }
        .cutline {
            border-bottom: 1px solid #ddd;
        }
        input[type="text"] {
            padding: 5px;
            width: 50px;
        }
        input[type="button"], button {
            padding: 10px 20px;
            margin-right: 10px;
            background-color: #ff3333;
            color: #fff;
            border: none;
            cursor: pointer;
        }
        input[type="button"]:hover, button:hover {
            background-color: #ff5555;
        }
        .vertical-divider {
            width: 100px;
            background-color: #ddd;
            height: 100%;
            margin-left: 100px;
        }
        .qr-modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
        }
        .qr-modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 50%;
            text-align: center;
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- header.php -->
    <?php include '../common/header.php'; ?>

    <?php if ($row): ?>
    <div class="container w1100 mt10">
        <div class="gtds cut">
            <div class="gimbox fl">
                <!-- 商品图片开始 -->
                <div class="module">
                    <div class="im cut">
                        <div id="goods-imgarea" style="position: relative; overflow: hidden;">
                            <img src="<?php echo htmlspecialchars($row['GOODS_PICTURE']); ?>" width="350px">
                        </div>
                        <i class="zoom icon">放大</i>
                    </div>
                    <div class="tmb mt10 cut">
                        <a class="tmb-arrow lh disabled" id="tmb-back-btn"><i class="icon">&lt;</i></a>
                        <div class="tmb-im cut">
                            <!-- 可以在这里添加更多的缩略图 -->
                        </div>
                        <a class="tmb-arrow rh disabled" id="tmb-forward-btn"><i class="icon">&gt;</i></a>
                    </div>
                </div>
                <!-- 商品图片结束 -->
            </div>
            <div class="vertical-divider"></div>
            <div class="gtbox cut">
                <h1><?php echo htmlspecialchars($row['GOODS_NAME']); ?></h1>
                <p class="mt8 c888" style="font-size: 30px"><?php echo htmlspecialchars($row['GOODS_NAME']); ?></p>
                <div class="gatt module mt10 cut">
                    <dl>
                        <dt>goods:</dt>
                        <dd><?php echo htmlspecialchars($row['GOODS_ID']); ?></dd>
                    </dl>
                    <dl class="mt5">
                        <dt>old_price:</dt>
                        <dd class="npri"><del><i>¥</i><?php echo htmlspecialchars($row['GOODS_OLD_PRICE']); ?></del></dd>
                    </dl>
                    <dl class="mt5">
                        <dt>price:</dt>
                        <dd class="npri"><i>¥</i><?php echo htmlspecialchars($row['GOODS_PRICE']); ?></dd>
                    </dl>
                    <dl>
                        <dt>desc:</dt>
                        <dd><?php echo nl2br(htmlspecialchars($row['GOODS_DESC'])); ?></dd>
                    </dl>
                </div>
                <div class="cutline mt10"></div>
                <div class="gatt module">
                    <form method="post" id="buy-form">
                        <dl class="mt15">
                            <dt>count:</dt>
                            <dd>
                                <input name="count" id="count" type="text" required>
                                <font class="c999 ml5">singal</font>
                            </dd>
                        </dl>
                        <input type="button" id="buy-button" value="buy">
                        <button id="addcart" name="addcart" type="button">add to card </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 模态框 -->
	<div id="qr-code-modal" class="qr-modal">
		<div class="qr-modal-content">
			<span class="close" id="close-modal">&times;</span>
			<img id="qr-code-img" src="../images/bing_generated_qrcode.png" alt="QR Code">
			<p>请扫描二维码完成支付</p>
		</div>
	</div>
    
    <!-- 主体结束 -->
    <?php else: ?>
    <p>没有找到相关商品。</p>
    <?php endif; ?>

    <!-- footer.php -->
    <?php include '../common/footer.php'; ?>

     <script>
		document.getElementById('buy-button').addEventListener('click', function() {
			var count = document.getElementById('count').value;
			if (count.trim() === '') {
				alert('请输入购买数量');
				return;
			}

			// 显示模态框
			document.getElementById('qr-code-modal').style.display = 'block';
		});

		document.getElementById('close-modal').addEventListener('click', function() {
			document.getElementById('qr-code-modal').style.display = 'none';
		});

		window.onclick = function(event) {
			var modal = document.getElementById('qr-code-modal');
			if (event.target == modal) {
				modal.style.display = 'none';
			}
		};
	</script>

    <?php
    include '../db_close.php';
    ?>
</body>
</html>